<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 10px;
        background-color: #ccc;
        margin: 100px auto;
        border-radius: 5px;
        position: relative;
      }
      .box1 {
        width: 200px;
        margin: 0 auto;
        position: relative;
      }
      .round {
        width: 15px;
        height: 15px;
        background-color: #fff;
        border: 1px solid black;
        border-radius: 50%;
        top: -25%;
        position: absolute;
      }
      .length {
        width: 0%;
        position: absolute;
        background-color: skyblue;
        border-radius: 5px ;
        height: 10px;
      }
      .num {
        position: absolute;
        top: -100px;
        left: 50%;
      }
      .number{
        position: absolute;
        left: 40%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="length"></div>
      <div class="round"></div>
      <div class="num">0</div>
    </div>
    <div class="box1">
      <input type="range" value="0"  style="width: 200px;"/>
      <div class="number">分数：0</div>
    </div>
    <script>
      let round = document.querySelector('.round')
      let length = document.querySelector('.length')
      let box = document.querySelector('.box')
      let num = document.querySelector('.num')
      let minusX
      round.onmousedown = (e) => {
        let initX = e.clientX
        console.log(initX)
        document.onmousemove = (e) => {
          let moveX = e.clientX
          minusX = moveX - initX
          if (minusX < 0) {
            minusX = 0
          }
          if (minusX > 190) {
            minusX = 190
          }
          round.style.left = minusX + 'px'
          length.style.width = minusX + 'px'
          let number = Math.round(minusX / 1.9)
          num.innerHTML = number
        }
      }
      document.onmouseup = function () {
        document.onmousemove = null
      }
      let input= document.querySelector('input');
      let number= document.querySelector('.number');
      
      input.addEventListener('mousemove',function () {
        number.innerHTML='分数：'+ input.value
      })
      input.addEventListener('change',function () {
        number.innerHTML='分数：'+ input.value
      })
    </script>
  </body>
</html>
